$(() => {
    const layer = layui.layer;
    const form = layui.form;

    // 裁剪选项
    const options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview',
    };

    initCate();
    // 初始化富文本
    initEditor();
    // 初始化裁剪区域
    initCrop();
    // 选择封面
    cover();

    // 初始加载文章分类
    function initCate() {
        $.ajax({
            method: "GET",
            url: "/my/article/cates",
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message);
                }
                const htmlStr = template('tpl-cate', res);
                $('[name=cate_id]').html(htmlStr);
                // 重新渲染表格
                form.render();
            }
        });
    }

    // 初始化裁剪区域

    function initCrop() {
        const $image = $('#image');
        $image.cropper(options);
    }

    // 选择封面
    function cover() {
        $('#btnChooseImage').on('click', function () {
            $('#coverFile').click();
        });

        const $image = $("#image");
        $('#coverFile').on('change', function (e) {
            e.preventDefault();
            // 更换裁剪图片
            const file = e.target.files[0];
            const url = URL.createObjectURL(file);
            $image
                .cropper('destroy') // 销毁旧区域
                .prop('src', url)
                .cropper(options);
        });
    }

    // 定义文章发布之状态
    let art_state = '已发布';

    // 绑定草稿事件
    $('#btnSaveDraft').on('click', function () {
        art_state = '草稿';
    });

    // 表单submit事件
    $('#form-pub').on('submit', function (e) {
        e.preventDefault();

        const fd = new FormData($(this)[0]);
        // 将文章的发布状态,保存到 fd中
        fd.append('state', art_state);

        $('#image')
            .cropper('getCroppedCanvas', {
                width: 400,
                height: 280
            })
            .toBlob(function (blob) {
                fd.append('cover_img', blob);
                publishArticle(fd);
            });

    });

    function publishArticle(formData) {
        $.ajax({
            method: 'POST',
            url: '/my/article/add',
            data: formData,
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message);
                }
                layer.msg(res.message);
                // 发表成功后,跳转页面 /practice/BreakingNews/article/art_list.html
                location.href = '/article/art_list.html';
            }
        });
    }
});